import { Tabs } from 'antd-mobile'
import './style.css'
import { useEffect, useState } from 'react'
import { fetchChannelApi, type ChannelItem } from '../../apis/list'
import { useTabs } from './UseTabs'
import HomeList from './homeList'

const Home = () => {
    const {channels} = useTabs()

    return <div>
        <div className='tabContainer'>
            {/* tab区域 */}
            <Tabs defaultActiveKey={'0'}>
            {channels.map((item) => (
                <Tabs.Tab title={item.name} key={item.id}>
                {/* list组件 */}
                {/* 别忘了加上类名，严格控制滚到盒子 */}
                <div className='listContainer'>
                    <HomeList channelId={''+item.id}></HomeList>
                </div>
                </Tabs.Tab>
            ))}
            </Tabs>
        </div>
    </div>
}

export default Home